<template>
	<view class="">
		<form @submit="formSubmit">
			<view class="list">
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label">
						所属项目
					</view>
					<view class="acea-row row-middle row-right item-r sanjiao-right">
						<!-- <Uselect class="input-r" v-model="dataform.projectId" :list="projectList" keyName="name"
							keyId="id" @inChange="getProjectList" placeholder="请选择项目" /> -->
						<!-- <input class="input-r" type="text" v-model="projectName" name='floor' placeholder="请选择项目"
							placeholder-class="placeholder-class" disabled> -->
						<chooseComp :dataform="dataform" placeholder="请选择项目" @change="(key,val)=>dataform[key]=val" />
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label label-m">
						地址
					</view>
					<view class="acea-row row-middle row-right item-r address">
						<input type="text" placeholder="请输入/选择地址" v-model="addres" name='addres'>
						<image src="../static/images/location.png" mode="" @click="clickMap"></image>
					</view>
				</view>
				<view class="acea-row row-middle row-between">
					<view class="acea-row row-middle row-between item border-b w-48">
						<view class="label label-m">产权面积</view>
						<view class="acea-row row-middle row-right small-ipt">
							<input type="number" placeholder="示例:30" placeholder-class="placeholder-class"
								v-model="bvileAvea" name='bvileAvea' @change="val=>avea=(avea?avea:val.detail.value)">
							<text>m²</text>
						</view>
					</view>
					<view class="acea-row row-middle row-between item border-b w-48">
						<view class="label label-m">使用面积</view>
						<view class="acea-row row-middle row-right small-ipt">
							<input type="number" placeholder="示例:30" placeholder-class="placeholder-class"
								v-model="avea" name='avea' @input="fillTitle">
							<text>m²</text>
						</view>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label label-m">
						户型/朝向
					</view>
					<!-- <view class="acea-row row-middle row-right item-r">
						<input class="input-r" type="text" placeholder="请输入户型/朝向" v-model="householdType"
							name='householdType'>
					</view> -->
					<view class="acea-row row-middle row-right item-r">
						<picker @change="bindPickerChange" :value="householdListIndex" :range="householdList"
							range-key='describe' mode="multiSelector">
							<view class="uni-input">
								{{ householdList[0][householdListIndex[0]] ? householdList[0][householdListIndex[0]].describe+'/'+householdList[1][householdListIndex[1]].name : '请选择户型'}}
							</view>
						</picker>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label">
						楼层
					</view>
					<view class="acea-row row-middle row-right item-r floor">
						<view class="">第</view>
						<input type="number" v-model="floor1">
						<view class="">层</view>
						<view class="margin-l">共</view>
						<input type="number" v-model="floor2">
						<view class="">层</view>
					</view>
				</view>

				<view class="acea-row row-middle row-between item border-b ">
					<view class="label">
						电梯
					</view>
					<view class="acea-row row-middle row-right item-r radio-list">
						<view class="acea-row row-middle radio-item" @click="elevator=1">
							<image src="../static/images/radio_on.png" mode="" v-if="elevator == 1"></image>
							<image src="../static/images/radio_no.png" mode="" v-else></image>
							<view class="">有</view>
						</view>
						<view class="acea-row row-middle radio-item margin-l" @click="elevator=0">
							<image src="../static/images/radio_on.png" mode="" v-if="!elevator == 1"></image>
							<image src="../static/images/radio_no.png" mode="" v-else></image>
							<view class="">无</view>
						</view>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label label-m">
						装修
					</view>
					<view class="acea-row row-middle row-right item-r sanjiao-right">
						<picker @change="renovationChange" :value="renovationIndex" :range="renovationList"
							range-key="name">
							<view :class="renovationName ?'' :'no-data-r'">{{renovationName ? renovationName : '请选择'}}
							</view>
						</picker>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label">
						单价
					</view>
					<view class="acea-row row-middle row-right item-r small-ipt">
						<input type="number" placeholder="示例:500" placeholder-class="placeholder-class"
							v-model="salemoney" name='salemoney' @change="jisuan" />
						<text>元/㎡</text>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label label-m">
						总价
					</view>
					<view class="acea-row row-middle row-right item-r">
						<input type="number" class="input-r" placeholder="示例:3000" placeholder-class="placeholder-class"
							v-model="sellOunt" name='sellOunt'>
						<text>元</text>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label">投资回报率</view>
					<view class="acea-row row-middle row-right item-r small-ipt">
						<input type="number" placeholder="示例:50" v-model="returnInvestment" name='returnInvestment'
							placeholder-class="placeholder-class">
						<text>%</text>
					</view>
				</view>
				<!-- 付款方式  全款、按揭 -->
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label label-m">
						支付方式
					</view>
					<!-- <view class="acea-row row-middle row-right item-r sanjiao-right">
					<view class="no-data-r">请选择</view>
				</view> -->
					<view class="acea-row row-middle row-right item-r sanjiao-right">
						<!-- <input class="input-r" type="text" placeholder="请选择付款方式" v-model="modePayment"
							name='modePayment' placeholder-class="placeholder-class" disabled> -->
						<payType v-model="dataform.payType" />
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label">
						配套设施
					</view>
					<!-- <view class="acea-row row-middle row-right item-r sanjiao-right">
					<view class="no-data-r">请选择配套设施</view>
				</view> -->
					<view class="acea-row row-middle row-right item-r sanjiao-right" @click="opendiction(15)">
						<view class="no-data-r"
							v-if=" (supportingFacility&&supportingFacility.length == 0) || !supportingFacility">请选择配套设施
						</view>
						<view v-else><span v-for="item in supportingFacility" :key='item.id'> {{item.name}} , </span>
						</view>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label">
						标题
					</view>
					<view class="acea-row row-middle row-right item-r">
						<input class="input-r" type="text" placeholder="请输入标题" placeholder-class="placeholder-class"
							v-model="title" name='title' />
					</view>
				</view>
				<!-- 联系人 -->
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label label-m">
						联系人
					</view>
					<view class="add-icon" @click="addContact">
						<image src="../static/images/add_icon.png" mode=""></image>
					</view>
				</view>
				<view class="item border-b">
					<!-- <view class="contact-list">
						<view class="acea-row row-middle row-between contact-p" v-for="(item,index) in contactList"
							:key="index">
							<view class="acea-row row-middle row-between contact-r">
								<view class="add-icon" @click="deleteContact(index)">
									<image src="../static/images/sub_icon.png" mode=""></image>
								</view>
								<view class="name" @click="toPage('/pages/releases/addShopContact/addShopContact?info='+JSON.stringify(item) + '&infoIndex='+index)">{{item.username}}</view>
								<view class="gray-text" v-if='item.type == 1'>
									房东
								</view>
								<view class="gray-text" v-if='item.type == 2'>
									老板
								</view>
								<view class="gray-text" v-if='item.type == 3'>
									雇员
								</view>
								<view class="gray-text"
									@click="toPage('/pages/releases/addShopContact/addShopContact?info='+JSON.stringify(item) + '&infoIndex='+index)">
									{{item.phone}}
								</view>
							</view>
							<view class="acea-row row-middle check-box" v-if="item.open == 0">
								<image src="../static/images/checkbox_no.png" mode="" @click="openChange(item,1)">
								</image>
								<text>公开</text>
							</view>
							<view class="acea-row row-middle check-box" v-if="item.open == 1">
								<image src="../static/images/checkbox_on.png" mode="" @click="openChange(item,0)">
								</image>
								<text>公开</text>
							</view>
						</view>
					</view> -->
					<chooseContact :list="contactList" :dataform="dataform" @add="d=>contactList.push(d)"
						@del="toDel" />

				</view>
				<!-- 房源标签 -->
				<view class="module border-b">
					<!-- <view class="acea-row row-middle row-between">
						<view class="module-title">
							房源标签
						</view>
						<view class="add-advantage red-sanjiao-r" @click="addAd">
							没找到合适的？选择自定义
						</view>
					</view>
					<view class="acea-row advantage-list">
						<view class="itemBox" v-for="(item,index) in advantages" :key="index">
							<icon type="cancel" color="#000" size="14" @click="closeAdvantages(item,index)"
								class="close" />
							<view class="item" :class="advantageIds.indexOf(index)!=-1?'item-on':''"
								@click="advantageChecked(item,index)">{{item}}</view>
						</view>
					</view> -->
					<chooseKeywords title="房源标签" :advantages="advantages" type="7" :typeOn="typeOn"
						:storeAdvantage="storeAdvantage" :advantageIds="advantageIds"
						@storeAdvantage="val=>(storeAdvantage=val)" @advantageIds="val=>(advantageIds=val)"
						@advantages="val=>(advantages=val)" />

				</view>
				<!-- 描述 -->
				<view class="module">
					<view class="module-title">
						描述
					</view>
					<view class="textacea-box">
						<textarea placeholder="请输入描述" v-model="details" :maxlength="maxLength"
							name='details'></textarea>
						<view class="num-text">
							{{details?details.length:0}}/{{maxLength}}
						</view>
					</view>
				</view>
				<!-- 房屋照片/视频 -->
				<view class="module">
					<view class="acea-row row-middle row-between">
						<view class="module-title">
							房屋照片/视频
						</view>
						<view class="example-text" @click="getImage">
							图片示例
						</view>
					</view>
					<view class="example-text-l">
						请至少添加一张正面照，图片越多审核越快
					</view>
					<view class="acea-row pictrue-list">
						<view class="acea-row row-column row-center-wrapper pictrue" v-for="item in PhotoList"
							:key="item.url">
							<image style="width: 218rpx;height: 172rpx;" :src="item.url" mode=""
								v-if="item.type=='image'">
							</image>
							<video style="width: 218rpx;height: 172rpx;" :src="item.url" mode="" v-else></video>
						</view>
						<view class="acea-row row-column row-center-wrapper pictrue" @click="uploadImg"
							v-if="PhotoList.length < 10">
							<view class="upload-icon">
								<image src="../static/images/upload_icon.png" mode=""></image>
							</view>
							<view>添加照片/视频</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 按钮 -->
			<!-- <view class="acea-row row-between row-middle btns">
			<view class="white-btn" @click="continueFillIn">继续完善</view>
			<view class="red-btn">完成</view>
		</view> -->
			<button class="submit-btn" form-type="submit">
				完成
			</button>
		</form>
		<dictionaryType :gids='gids' @clickOk='clickOk' :popupShow='openPopupShow'
			@popupClose="openPopupShow = false" />
		<ImageInstance ref="ImageInstance"></ImageInstance>
		<addKeyWord ref="addKeyWord" @addConfirm="addConfirm" />
		<wordSearch ref="wordSearch" :list="projectList" keyName="name" keyId="id" v-model="dataform.projectId"
			@inChange="getProjectList" @name="(name)=> projectName = name" />
	</view>
</template>

<script>
	import {
		Debounce
	} from '@/utils/validate.js'
	import dictionaryType from '../components/dictionaryType.vue'
	import ImageInstance from '../components/ImageInstance.vue'
	import wordSearch from '../components/wordSearch/wordSearch.vue'
	import chooseKeywords from '../components/chooseKeywords.vue'
	import payType from './payType.vue'
	import {
		informationAdd,
		ProjectList,
		dictionary,
		ShopRentDetailApiNoDw,
		editInfo
	} from "@/api/subletOfShop.js"
	import {
		getCategory,
		toPage
	} from '@/filters/commFilter.js'
	import Uselect from '../components/select.vue'
	import addKeyWord from '../components/addKeyWord/addKeyWord.vue'
	import chooseContact from '../components/chooseContact.vue'
	import chooseComp from './chooseComp.vue'
	export default {
		components: {
			dictionaryType,
			Uselect,
			ImageInstance,
			addKeyWord,
			wordSearch,
			chooseKeywords,
			payType,
			chooseContact,
			chooseComp
		},
		props: ['categoryOn', 'typeOn', 'editId', 'patientinfo', 'st', 'storeCategory'],
		watch: {
			categoryOn(val) {
				this.fillTitle()
			}
		},
		data() {
			return {
				openPopupShow: false,
				modePayment: '',
				householdType: '',
				communityName: '', //小区名称
				addres: this.$address, //地址
				returnInvestment: '',
				bvileAvea: '', //产权面积
				avea: '', //使用面积
				floor1: 1, //楼层
				floor2: 1, //楼层层数
				salePrice: '', //期望售价
				sellOunt: '', //月租金
				rentMeet: false, //月租金是否面议
				payMonth: 6, //付款方式月
				payMoney: 10000, //付款方式押金
				title: '', //标题
				contactList: [],
				advantages: [], //店铺优势
				advantageIds: [],
				maxLength: 200,
				avea: '',
				details: '', //补充
				// 电梯
				elevator: 1,
				supportingFacility: [],
				storeAdvantage: [],
				PhotoList: [],
				renovationList: [{
					id: 0,
					name: '没有'
				}, {
					id: 1,
					name: '有'
				}, {
					id: 2,
					name: '不限'
				}],
				renovationName: '',
				renovationIndex: 0,
				gids: 15,
				projectList: [], //项目列表
				dataform: {},
				householdList: [
					[],
					[]
				], //获取户型列表
				householdListIndex: [0, 0], //获取户型标识
				location: {},
				projectName: '',
				businessName: '',
				businessCircle: '',
				salemoney: ''

			}
		},
		mounted() {
			let that = this
			that.location = that.$location;
			this.getProjectList('');
			this.getDictionary('28,30');
			getApp().globalData.initContact()
			this.dataform.city = this.$cityCode ? this.$cityCode[1] : '';
			this.dataform.province = this.$cityCode ? this.$cityCode[0] : '';
			this.dataform.district = this.$cityCode ? this.$cityCode[2] : '';
			if (this.editId) {
				this.getDetail()
			} else {
				that.getBusiness(that.$location)
			}
		},
		watch: {
			categoryOn(val) {
				this.fillTitle()
			},
			avea() {
				this.fillTitle()
			},
			patientinfo: {
				handler: function(newV, oldV) {
					console.log("newV", newV)
					if (newV && Object.keys(newV).length > 0) {
						this.dataform = {
							...this.dataform,
							...newV
						}
						this.dataform.bvileAvea = this.dataform.floorage
						this.bvileAvea = this.dataform.floorage
						let d = this.dataform;
						getApp().globalData.fbDeal(d, this)
						this.supportingFacility = this.dataform.supportingName;
						this.storefrontTypeName = this.dataform.storefrontName
						this.floor = this.dataform.floor[0].split('-')
						this.avea = this.dataform.avea
						console.log(this.dataform)
					}
				},
				deep: true,
			}
		},
		methods: {
			toPage,
			projectClick() {
				this.$refs.wordSearch.open = true
			},
			toDel(index, info, callback) {
				if (info) {
					this.contactList.splice(index, 1, info);
				} else {
					this.contactList.splice(index, 1);
				}
				callback && callback();
			},
			//添加配套要求
			addAd() {
				this.$refs.addKeyWord.popupShow = true
			},
			addConfirm(e) {
				this.advantages = this.advantages.concat(e)
			},
			jisuan() {
				console.log(this.salemoney, this.avea)
				if (this.salemoney && this.avea) {
					this.sellOunt = this.salemoney * this.bvileAvea;
				}
			},
			//获取项目列表
			async getProjectList(name) {
				try {
					const {
						data
					} = await ProjectList({
						name
					});
					this.projectList = data.list;
				} catch (e) {
					//TODO handle the exception
				}
			},
			//获取户型字典列表
			async getDictionary(gids) {
				try {
					const {
						data
					} = await dictionary({
						gids
					});
					this.householdList = [data['28'], data['30']];
					console.log(this.householdList)
				} catch (e) {
					//TODO handle the exception
				}
			},
			//自动填充标题 出售200平写字楼
			fillTitle() {
				if (this.editId && this.title) {
					return;
				}
				const category = getCategory(this.categoryOn).name
				this.title = this.bvileAvea ? '出售' + (this.businessName ? this.businessName : '') + this.bvileAvea + '㎡' + category :
					this.title
			},
			//查看图片示例
			getImage() {
				this.$refs.ImageInstance.show = true
			},
			//户型
			bindPickerChange(e) {
				console.log(e)
				this.householdListIndex = e.detail.value;
			},
			renovationChange(e) {
				this.renovationIndex = e.detail.value
				this.renovationName = this.renovationList[this.renovationIndex].name
			},
			formSubmit: Debounce(function(e) {
				let objdata = e.detail.value
				let that = this
				// if (!that.dataform.projectId) return that.$util.Tips({
				// 	title: '请选择项目'
				// });
				if (!that.addres) return that.$util.Tips({
					title: '请输入/选择地址'
				});
				if (!that.bvileAvea) return that.$util.Tips({
					title: '请输入产权面积'
				});
				if (!that.avea) return that.$util.Tips({
					title: '请输入使用面积'
				});
				if (!that.sellOunt) return that.$util.Tips({
					title: '请输入期望售价'
				});
				if (!that.dataform.payType) return that.$util.Tips({
					title: '请输入付款方式'
				});
				if (!that.contactList || that.contactList.length == 0) return that.$util.Tips({
					title: '请输入联系人'
				});
				e.detail.value.shopfrontPhoto = that.PhotoList ? that.PhotoList.map(item => item.url).join(",") :
					''
				e.detail.value.floor = this.floor1 + '-' + this.floor2
				e.detail.value.elevator = that.elevator;
	
				//户型
				e.detail.value.householdType = that.householdList[0][that.householdListIndex[0]].describe + '/' +
					that.householdList[1][that.householdListIndex[1]].name
				e.detail.value.renovation = that.renovationList[that.renovationIndex].id
				objdata.supportingFacility = that.supportingFacility && that.supportingFacility.length > 0 ? that
					.supportingFacility.map(
						item => item.id).join(',') : '';
				e.detail.value.contacts = that.contactList.map(item => {
					const {
						id,
						type,
						open,
						were
					} = item;
					return {
						contactId: id,
						identity: type,
						open,
						were
					}
				})
				e.detail.value.storeAdvantage = that.storeAdvantage.join('/')
				e.detail.value.shopfrontPhoto = that.PhotoList ? that.PhotoList.map(item => item.url).join(",") :
					''
				e.detail.value.storeCategory = getCategory(that.categoryOn).value
				if (that.typeOn == 3) { //出售
					e.detail.value.status = '1'
				}
				e.detail.value.businessCircle = this.businessCircle
				e.detail.value = {
					...that.location,
					// city: this.$cityCode ? this.$cityCode[1] : '',
					// province: that.$cityCode ? that.$cityCode[0] : '',
					// district: that.$cityCode ? that.$cityCode[2] : '',
					...that.dataform,
					...e.detail.value
				}
				if (this.editId) {
					e.detail.value.id = this.editId;
					editInfo(e.detail.value).then(res => {
						if (res.code == 200) {
							this.$util.Tips({
								title: '编辑成功'
							}, {
								tab: 3
							})
							// uni.navigateBack()
						} else {
							this.$util.Tips({
								title: '编辑失败'
							})
						}

					}).catch(e => {
						this.$util.Tips({
							title: e
						})
					})
				} else {
					informationAdd(e.detail.value).then(res => {
						if (res.code == 200) {
							that.$util.Tips({
								title: '发布成功'
							}, {
								tab: 2,
								url: '/pages/releases/rentalStores/rentalStores'
							})
						}
					})
				}
			}),
			clickMap(success) {
				uni.chooseLocation({
					success: (res) => {
						this.addres = res.address
						that.$set(that.location, 'latitude', res.latitude)
						that.$set(that.location, 'longitude', res.longitude)
						that.getBusiness({
							longitude: res.longitude,
							latitude: res.latitude,
						})
					},
				})
			},
			getBusiness(location) {
				let that = this;
				getApp().globalData.getBusinessList(location).then(res => {
					if (res.code == 200) {
						console.log("定位获取到的商圈", res)
						that.dataform.province = res.data.province;
						that.dataform.city = res.data.city;
						that.dataform.district = res.data.district;
						that.businessName = res.data.businessName;
						that.businessCircle = res.data.businessId;
						that.fillTitle()
					}
				});
			},
			//上传照片
			uploadImg() {
				uni.showActionSheet({
					title: '选择上传类型',
					itemList: ['图片', '视频'],
					success: res => {
						if (res.tapIndex == 0) {
							this.chooseImages();
						} else {
							this.chooseVideo();
						}
					}
				});
			},
			//选择照片
			chooseImages() {
				let that = this;
				that.$util.uploadImageOne({
					url: 'upload/image',
					count: 5,
					name: 'multipart',
					model: "user",
					pid: 0
				}, function(res) {
					console.log(res)
					that.PhotoList.push({
						url: res.data.url,
						type: 'image'
					})
				});
			},
			//选择视频
			chooseVideo() {
				let that = this;
				that.$util.uploadVideo({
					url: 'upload/image',
					name: 'multipart',
					model: "user",
					pid: 0
				}, function(res) {
					console.log(res)
					that.PhotoList.push({
						url: res.data.url,
						type: 'video'
					})
				});

			},
			openChange(row, index) {
				row.open = index
			},
			deleteContact(index) {
				this.contactList.splice(index, 1)
			},
			opendiction(gids) {
				this.gids = gids
				this.openPopupShow = true
			},
			clickOk(val) {
				if (this.gids == 15) {
					this.supportingFacility = val
				} else if (this.gids == 27) {
					this.modePayment = val.map(item => {
						return item.describe
					}).join(',')
				}
				this.openPopupShow = false
			},
			//删除标签
			closeAdvantages(item, index) {
				this.advantages.splice(index, 1)
				if (this.advantageIds.indexOf(index) != -1) {
					let idx = this.advantageIds.indexOf(index)
					this.advantageIds.splice(idx, 1);
					this.storeAdvantage.splice(index, 1)
				}
			},
			advantageChecked(item, index) {
				if (this.advantageIds.indexOf(index) != -1) {
					let idx = this.advantageIds.indexOf(index)
					this.advantageIds.splice(idx, 1);
					this.storeAdvantage.splice(item, 1)
				} else {
					this.advantageIds.push(index);
					this.storeAdvantage.push(item)
				}
			},
			addContact() {
				uni.navigateTo({
					url: '/pages/releases/addShopContact/addShopContact'
				})
			},
			getDetail() {
				ShopRentDetailApiNoDw(this.editId, {
					status: this.st,
					storeCategory: this.storeCategory
				}).then(res => {
					console.log('editShop', res)
					let d = res.data
					this.dataform = res.data
					if (res.code == 200) {
						getApp().globalData.fbDeal(d, this)
						this.supportingFacility = this.sspre;
						this.returnInvestment = d.returnInvestment
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '/static/css/releaseForm.css';
</style>